<template>
    <div>
        <!-- 条件查询 -->
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-form :inline="true" :model="searchData" class="demo-form-inline">
                <el-form-item label="用户名">
                  <el-input v-model="searchData.userName" clearable></el-input>
                </el-form-item>
                  <el-button type="primary" @click="searchAdmin">查询</el-button>
                  <el-button type="primary" @click="openLog">添加</el-button>
                <!-- </el-form-item> -->
              </el-form>
              </div></el-col>
        </el-row>


        <!-- 新增与修改 -->
        <el-row>
          <el-col :span="20" :offset="4"><div class="grid-content bg-purple-dark">

            <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
              <el-form :model="addForm">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                  <el-input v-model="addForm.userName" clearable  v-if="Input"></el-input>
                  <el-input v-model="addForm.userName" clearable v-if="showInput"  :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input v-model="addForm.password" clearable></el-input>
                </el-form-item>

                <el-form-item label="真实姓名" :label-width="formLabelWidth">
                  <el-input v-model="addForm.realName" clearable></el-input>
                </el-form-item>

                <el-form-item label="年龄" :label-width="formLabelWidth">
                  <el-input v-model="addForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-select v-model="addForm.sex" placeholder="请选择" clearable>
                      <el-option
                        v-for="item in sex"
                        :value="item.dictValue" 
                        :key="item.dictValue"             
                        :label="item.dictLabel">
                      </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="addForm.birthday" clearable type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="手机" :label-width="formLabelWidth">
                  <el-input v-model="addForm.phone"></el-input>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-select v-model="addForm.status" placeholder="请选择" clearable>
                      <el-option
                        v-for="item in status"
                        :value="item.dictValue" 
                        :key="item.dictValue"             
                        :label="item.dictLabel">
                      </el-option>
                    </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="empty">重 置</el-button>

                <el-button v-if="FourBtn== 'add'" type="primary" @click="Addadmin()">新 增</el-button>

                <el-button v-if="FourBtn== 'update'" type="primary" @click="upAdmin()">修 改</el-button>


              </div>
            </el-dialog>

          </div></el-col>
        </el-row>


        <!-- 表格展示 -->
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark">
              <el-table :data="findAdminData" height="550" border>
                <el-table-column prop="id" label="Id"></el-table-column>
                <el-table-column prop="userName" label="用户名"></el-table-column>
                <el-table-column prop="realName" label="真实姓名"></el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sex ==0">男</span>
                        <span v-if="scope.row.sex ==1">女</span>
                        <span v-if="scope.row.sex ==2">未知</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="createTime" label="创建时间"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">
                        <span class="aaa" v-if="scope.row.status ==0">启用</span>
                        <span class="aaa" v-if="scope.row.status ==1">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="260">
                    <template slot-scope="scope">
                        <el-button size="small" type="danger" @click="delAdmin(scope.row)" plain >删除</el-button>
                        <el-button size="small" v-if="scope.row.status==0" @click="update1(scope.row)" plain>禁用</el-button>
                        <el-button size="small" v-else  @click="update2(scope.row)" plain>启用</el-button>
                        <el-button size="small" @click="getAdmin(scope.row)" plain>编辑</el-button>
                    </template>
                </el-table-column>
              </el-table>

            <!-- 分页 -->
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 4, 6, 8]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="float:right">
                </el-pagination>
            </div>


              </div></el-col>
        </el-row>

    </div>
</template>


<script>
import axios from 'axios';
export default {
    data(){
        return{
            findAdminData:[],
            pageNum:1,
            pageSize:2,
            total:null,
            searchData:{
                "userName":""
            },
            dialogFormVisible: false, //新增弹窗
            formLabelWidth: '120px', //新增表单宽度
            FourBtn:null, //控制按钮
            dialogTitle:"添加数据",//控制标题
            addForm:{
                "age": null,
                "birthday": "",
                "password": "",
                "phone": "",
                "realName": "",
                "sex": "",
                "status": "",
                "userName": ""
            },

            sex:[],
            status:[],
            showInput:false,
            Input:true
        }
    },
    created(){
        this.initTable();
        this.searchDict();
    },
    methods:{

        //查询字典数据的性别
        searchDict(){
          axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_user_sex").then(res=>{
            this.sex =res.data.data
          }),
          axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_normal_disable").then(res=>{
            this.status =res.data.data
          })

        },
       //修改
         //回显
         getAdmin(row){
             this.dialogFormVisible=true,
             this.dialogTitle="修改",
             this.FourBtn="update"  
             this.code = true;     
             this.addForm = row,
             this.showInput = true;
             this.Input = false;

       },
       //修改按钮
       upAdmin(){
         axios.put("/api/tbadmin/updateAdmin",this.addForm).then(res=>{
             //弹框
             this.$message({
                 message: res.data.message,
                 type: 'success'
               });
               this.initTable();//刷新表格

               this.dialogFormVisible=false

           })
       },
        //打开新增弹框
        openLog(){

        this.dialogFormVisible=true,
        this.dialogTitle="添加",
        this.code = false;
        this.FourBtn="add"
        this.addForm={}
       

        },
        //新增
        Addadmin(){
             axios.post("/api/tbadmin/addAdmin",this.addForm).then(res=>{
               //弹框
               this.$message({
                   message: res.data.message,
                   type: 'success'
                 });
                 this.initTable();//刷新表格
                 this.dialogFormVisible=false
             })
         },
         empty(){
            this.addForm = {}
         },
        //启用
        update2(row){
            axios.put("/api/tbadmin/aboveStatus?id="+row.id).then(res=>{
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.initTable();
            })
        },
        //禁用
        update1(row){
            axios.put("/api/tbadmin/underStatus?id="+row.id).then(res=>{
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.initTable();
            })
        },

        //删除
        delAdmin(row){
            axios.delete("/api/tbadmin/deleteAdminById?id="+row.id).then(res=>{
                this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                this.initTable();
            })
        },
        //条件查询
        searchAdmin(){
            this.initTable();
        },
        //查询
        initTable(){
            axios.post("/api/tbadmin/findAdminPaginationList?pageNum=" + this.pageNum + "&pageSize=" +this.pageSize,this.searchData)
                .then(res=>{
                    this.findAdminData = res.data.data.items
                    this.total = res.data.data.totalElements
                })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },
    }
    
}
</script>

<style scoped>
.aaa{
    color: #67c23a;
}

</style>
